<template>
  <div>
    <el-dialog :visible.sync="detailDialog" title="提成明细" width="80%" center top="50px">
      <el-descriptions :column="2" border size="small" direction="horizontal">
        <el-descriptions-item label="ID">{{ detailData.parentId }}</el-descriptions-item>
        <el-descriptions-item label="店铺名称" v-if="commissionTypeId!=3">{{ detailData.storeName }}</el-descriptions-item>
        <el-descriptions-item label="仓库">{{ detailData.areaName }}</el-descriptions-item>
        <el-descriptions-item label="提成类型">{{ detailData.commissionTypeName }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ getStatus(detailData.status) }}</el-descriptions-item>
        <el-descriptions-item label="提成产生时间">{{ detailData.commissionTime }}</el-descriptions-item>
        <el-descriptions-item label="去货架时间" v-if="detailData.deliveryDate">{{
            detailData.deliveryDate
          }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ detailData.createTime }}</el-descriptions-item>
        <el-descriptions-item label="审核时间">{{ detailData.aduitTime }}</el-descriptions-item>
        <el-descriptions-item label="品牌" v-if="commissionTypeId!=3">{{ detailData.brand }}</el-descriptions-item>
        <el-descriptions-item label="装车车型" v-if="[2,3].includes(commissionTypeId)">{{
            detailData.vehicleModelName
          }}
        </el-descriptions-item>
        <el-descriptions-item label="出发地点" v-if="commissionTypeId==5">{{
            detailData.startLocation
          }}
        </el-descriptions-item>
        <el-descriptions-item label="门店位置" v-if="commissionTypeId==5">{{
            detailData.storeLocation
          }}
        </el-descriptions-item>
        <el-descriptions-item label="导航距离" v-if="commissionTypeId==5">{{
            detailData.navigationDistance
          }}
        </el-descriptions-item>

        <el-descriptions-item label="拣货组数" v-if="commissionTypeId==8">{{
            detailData.jhGoodsCount
          }}
        </el-descriptions-item>
        <el-descriptions-item label="仓储架固定金额" v-if="commissionTypeId==8">{{
            detailData.storageRackFixedAmount
          }}
        </el-descriptions-item>
        <el-descriptions-item label="营业区套件基准价" v-if="commissionTypeId==8">{{
            detailData.businessAreaKitBasePrice
          }}
        </el-descriptions-item>
        <el-descriptions-item label="营业区安装组数" v-if="commissionTypeId==9">{{
            detailData.installGroupNum
          }}
        </el-descriptions-item>
        <el-descriptions-item label="营业区组数基准价" v-if="commissionTypeId==9">{{
            detailData.installGroupBasePrice
          }}
        </el-descriptions-item>
        <el-descriptions-item label="仓储区安装组数" v-if="commissionTypeId==9">{{
            detailData.installGroupNumCk
          }}
        </el-descriptions-item>
        <el-descriptions-item label="仓储区组数基准价" v-if="commissionTypeId==9">{{
            detailData.installGroupBasePriceCk
          }}
        </el-descriptions-item>


        <el-descriptions-item label="营业区拆店组数" v-if="commissionTypeId==10">{{
            detailData.dismantleGroupNum
          }}
        </el-descriptions-item>
        <el-descriptions-item label="营业区提成基准价" v-if="commissionTypeId==10">{{
            detailData.dismantleBasePrice
          }}
        </el-descriptions-item>
        <el-descriptions-item label="仓储区拆店组数" v-if="commissionTypeId==10">{{
            detailData.dismantleGroupNumCk
          }}
        </el-descriptions-item>
        <el-descriptions-item label="仓储区提成基准价" v-if="commissionTypeId==10">{{
            detailData.dismantleBasePriceCk
          }}
        </el-descriptions-item>

        <el-descriptions-item label="提成总额">{{ detailData.totalCommission }}</el-descriptions-item>
        <el-descriptions-item label="零时工数量">{{ detailData.tempWorkerNum }}</el-descriptions-item>
        <el-descriptions-item label="扣提成总额">{{ detailData.deductCommission }}</el-descriptions-item>
        <el-descriptions-item label="最终提成"><span style="color: #ff4949">{{ detailData.commissionAmount }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="备注">{{ detailData.remark }}
        </el-descriptions-item>
        <el-descriptions-item label="凭证" :span="2">
          <div v-for="(item,index) in detailData.proof">
            <el-image style="width: 50px;height: 50px" :src="'https://'+item" :key="index"
                      :preview-src-list="detailData.proof.map(a=>'https://'+a)"
            ></el-image>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <el-table :data="detailData.commissionDetailsByPickerDTOList" show-summary border
                :summary-cell-style="{ textAlign: 'center' }"
                :headerCellStyle="{
              textAlign: 'center',
              'background': '#66b1ff',
              'color': 'white',
            }" :cellStyle="{ textAlign: 'center', 'font-size': '12px' }">
        <el-table-column prop="picker" label="提成人"></el-table-column>
        <el-table-column prop="totalCommission" label="总提成"></el-table-column>
        <el-table-column prop="deductCommission" label="扣除提成"></el-table-column>
        <el-table-column prop="employeeType" label="员工类型" v-if="commissionTypeId==9">
          <template v-slot:default="scope">
            <span v-if="scope.row.employeeType==1">老员工</span>
            <span v-if="scope.row.employeeType==2">新员工</span>
          </template>
        </el-table-column>
        <el-table-column prop="commissionProportion" label="提成比例" v-if="commissionTypeId==9"></el-table-column>
        <el-table-column prop="commissionAmount" label="最终提成"></el-table-column>
        <!--        <el-table-column prop="proof" label="凭证">-->
        <!--          <template v-slot:default="scope">-->
        <!--            <div v-for="(item,index) in scope.row.proof">-->
        <!--              <el-image style="width: 50px;height: 50px" :src="'https://'+item" :key="index"-->
        <!--                        :preview-src-list="scope.row.proof.map(a=>'https://'+a)"-->
        <!--              ></el-image>-->
        <!--            </div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
      <span slot="footer" v-if="type">
          <el-button type="danger" @click="_submit(3)">驳 回</el-button>
      <el-button type="success" @click="_submit(2)">通 过</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "commissionDetail",
  data() {
    return {
      detailDialog: false,
      detailData: {},
      aduitData: {},
      type: "",
      commissionTypeId: "",
    }
  },
  methods: {
    getStatus(val) {
      switch (val) {
        case 0:
          return "待分配"
          break;
        case 1:
          return "待审核"
          break;
        case 2:
          return "审核通过"
          break;
        case 3:
          return "已驳回"
          break;
        case 4:
          return "已取消"
          break;
      }
    },
    handleOpen(val, type) {
      this.type = type
      this.aduitData = val
      this.commissionTypeId = val.commissionTypeId
      this.$api.commissionDetailsCommissionDetailsView({id: val.id}).then(res => {
        if (res) {
          if (typeof res.proof === 'string' && res.proof) {
            res.proof = res.proof.split(',');
          }
          this.detailData = res
          this.detailDialog = true
        } else {
          this.$message.warning('暂无数据')
        }
      })
    },
    async _submit(val) {
      const data = {id: this.aduitData.id, status: val};
      const res = await this.$api.commissionDetailsAuditCommissionDetails(data);
      if (res) {
        this.detailDialog = false
        this.$message.success('审核成功');
        this.$emit('addStatus', 1)
      }
    },
  }
}
</script>

<style scoped>
/deep/ .cell {
  text-align: center;
}

</style>